<template>
  <div class="bio-container">
    <h1 class="title">PATIENCE</h1>
  </div>
</template>

<script setup lang="ts">
</script>


<style scoped lang="scss">

.bio-container {
  position: relative; /* 为了相对定位 */
  background: #231f20;
  height: 600px;
  width: 100%;
  cursor: pointer;
}

.title {
  font-size: 300px;
  letter-spacing: 8px;
  text-align: center;
  line-height: 600px;
  color: rgba(0, 0, 0, 0.5); /* 使用rgba表示法设置颜色，最后一个参数是透明度，值范围从 0（完全透明）到 1（完全不透明） */
  position: relative;
  z-index: 10;

  &:hover:after {
    background-position: 10% 20%, /* 第一张图片的位置偏移，向左 */
    30% 40%, /* 第二张图片的位置偏移，向右 */
    20% 10%; /* 第三张图片的位置偏移，向左 */
  }

  &:after {
    content: "";
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw-o.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw6-o.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw5-o.png');
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 1; /* 让背景图在文字之前显示 */
    transition: all 1s;
  }
}
</style>
